<template>
  <div>
    <van-nav-bar
      title="地图找房"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
      class="navColor"
    />
    <div>
      <baidu-map :center="center" :zoom="zoom" @ready="handler" class="map">
        <!-- 覆盖物 -->
        <!-- <bm-circle :center="circlePath.center" :radius="circlePath.radius"
         :stroke-opacity="0"
         :stroke-weight="0"
         @lineupdate="updateCirclePath"
         :editing="true"
         fillColor='#62b97e'
         ></bm-circle> -->
        <!-- <bm-circle
          :center="{lng:item.coord.longitude,lat:item.coord.latitude}"
          :radius="circlePath.radius"
          :stroke-opacity="0"
          :stroke-weight="0"
          @lineupdate="updateCirclePath"
          :editing="true"
          fillColor="#62b97e"
          v-for="(item,index) in list"
          :key="index"
        >
        </bm-circle> -->
        <bm-copyright
        anchor="BMAP_ANCHOR_TOP_RIGHT"
        :copyright="[
          {
            id: 1,
            content: 'Copyright Message',
            bounds: { ne: { lng: 110, lat: 40 }, sw: { lng: 0, lat: 0 } }
          },
          { id: 2, content: '' }
        ]"
      >
      </bm-copyright>
      <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"
      :offset="{width:200,height:585}"></bm-scale>
       <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"
        :offset="{height:540,width:10}"
        showZoomInfo
        ></bm-navigation>
        <bm-label
          :content="`${item.label}区 \n${item.count}套`"
          :position="{ lng: item.coord.longitude, lat: item.coord.latitude }"
          :labelStyle="type >= 3 ? labelStyle2 : labelStyle"
          v-for="(item, index) in list"
          :key="index"
           :offset="{ width: -35, height: 30 }"
           @click="clickCityFn(item)"
        />
      </baidu-map>
    </div>
     <van-popup v-if="isShow" position="bottom" :style="{ height: '60%' }">
       <div class="title">
         <van-cell title="房屋列表">
          <template>
            <div @click="$router.push('/home/list')">
              更多房源
            </div>
          </template>
         </van-cell>
       </div>
       <!-- 房屋列表 -->
       <div>
        111

       </div>
    </van-popup>
  </div>
</template>

<script>
import { getHouse } from '@/utils/stroage'
import { MapCityId } from '@/api/home'
// import { cityTwo } from '@/api/area'

// 初始化地图，设置中心点坐标和地图级别

export default {
  async created () {
    const BJCity = {
      label: '北京',
      pinyin: 'beijing',
      short: '热',
      value: 'AREA|88cff55c-aaa4-e2e0'
    }
    const cityToken = JSON.parse(getHouse())
    const mapCityId = cityToken || BJCity
    console.log(mapCityId)
    const id = mapCityId.value
    // const id = 'AREA|88cff55c-aaa4-e2e'

    // console.log(id)
    // const cityId = await cityTwo(id)
    // console.log(cityId)
    const res = await MapCityId(id)
    console.log(res.data.body)
    this.list = res.data.body
  },
  data () {
    return {
      homeDetail: [],
      isShow: false,
      type: 1,
      center: { lng: 0, lat: 0 },
      zoom: 10,
      list: [],
      // 覆盖物
      circlePath: {
        center: {
          lng: 116.404,
          lat: 39.915
        },
        radius: 350
      },
      labelStyle: {
        width: '70px',
        height: '70px',
        'line-height': '70px',
        'text-align': 'center',
        display: 'inline-block',
        position: 'absolute',
        'borde-radius': '100%',
        background: 'rgba(12,181,106,.9)',
        color: '#fff',
        border: '2px solid hsla(0,0%,100%,.8)',
        ' text-align': 'center',
        cursor: 'pointer',
        'border-radius': '50%'
      },
      labelStyle2: {
        height: '20px',
        'line-height': '19px',
        width: '100px',
        padding: '3px',
        'border-radius': '3px',
        position: 'absolute',
        background: 'rgba(12, 181, 106, 0.9)',
        cursor: 'pointer',
        'white-space': 'nowrap',
        color: '#fff',
        border: 'none',
        display: 'flex',
        'justify-content': 'center'
      }
    }
  },
  computed: {
    // getListCenter() {
    // }
  },
  methods: {
    handler ({ BMap, map }) {
      console.log(BMap, map)
      this.center.lng = 116.404
      this.center.lat = 39.915
      this.zoom = 15
    },
    updateCirclePath (e) {
      this.circlePath.center = e.target.getCenter()
      this.circlePath.radius = e.target.getRadius()
    },
    async clickCityFn (v) {
      this.type++
      // console.log(111)
      // console.log(v.value, this.type)
      const id = v.value
      const res = await MapCityId(id)
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true
      })
      this.list = res.data.body
      console.log(res)
      if (this.type >= 3) {
        this.isShow = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
.navColor {
  background-color: #58b67f;

  /deep/.van-icon {
    color: aliceblue;
  }
  /deep/.van-nav-bar__title {
    color: aliceblue;
    font-weight: normal;
  }
}
// 地图
.map {
  width: 100%;
  height: 622px;
  z-index: 111;
}
/deep/element.style {
  width: 70px;
  height: 70px;
  line-height: 1;
  display: inline-block;
  position: absolute;
  border-radius: 100% !important;
  background: rgba(12, 181, 106, 0.9);
  color: #fff;
  border: 2px solid hsla(0, 0%, 100%, 0.8) !important;
  text-align: center;
  cursor: pointer;
}
</style>
